<template name="placeFooter">
	<view :style="$s.view_color" class="place-order-footer">
		<view class="flex">
			<!-- <view class="coupon-tips">
				<view class="inner">
					<view class="r">
						<view class="info">
							<view bindtap="funPrivatebigzz" class="text">
								<text>还差</text>
								<text class="yellow">differenceAmt</text>
								<text>元，</text>
								<text>title</text>
								<text class="yellow arrow">buttonText</text>
							</view>
						</view>
						<text class="desc">content</text>
					</view>
				</view>
			</view> -->
		</view>
		<view class="content">
			<view class="info" v-if="is_retainer==0">
				<view class="price">
					<text class="title">金额</text>
					<text class="amount">{{totalMoney}}元</text>
					<text class="tag" v-if="couponFee>0">已减{{couponFee}}元</text>
<!-- 					<text class="period-num">第1/periodNum期</text> -->
					<!-- <text class="tag">couponRelief</text> -->
				</view>
<!-- 				<view class="b">
					<text class="total">含手续费35元</text>
					<text class="detail">费用明细</text>
				</view> -->
			</view>
			<view class="info" v-if="is_retainer==1">
				<view class="price">
					<text class="title">订金</text>
					<text class="amount">{{retainerFirstFee}}元</text>
					<text class="tag" v-if="couponFee>0">已减{{couponFee}}元</text>
				</view>
				<view class="b">
					<text class="total">尾款：￥{{retainerLastFee}}</text>
				</view>
			</view>
			<view class="submit">
				<button class="my-but-primary" @click="submit()" v-if="!submit_disabled">提交订单</button>
				<button class="my-but-primary" :disabled="true" :loading="true" @click="submit()" v-else>提交中</button>
			</view>
		</view>
		<view class="safe-area"></view>
	</view>
</template>

<script>
export default {
	name: 'placeFooter',
	props: {
		total:{
			type:[Object,Array],
			default:{},
		},
		is_retainer:{
			type:Number,
			default:1,				//是否是订金  1=订金  0=全款
		}
	},
	data() {
		return {
			submit_disabled:true,
		};
	},
	watch: {
		
	},
	computed: {
		//全款金额
		totalMoney(){
			return this.total.realmoney
		},
		// 优惠金额
		couponFee(){
			return this.total.discount_fee
		},
		// 订金
		retainerFirstFee(){
			return this.total.retainer_first_fee
		},
		//尾款
		retainerLastFee(){
			return this.total.retainer_last_fee
		},
	},
	methods: {
		submit(){
			this.$emit('submit')
		},
		//是否可以提交订单
		submitButton(status=true){
			this.submit_disabled=!status
		}
	}
};
</script>

<style lang="scss">
	.place-order-footer {
	    position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 999;
	    display: -ms-flexbox;
	    display: flex;
	    flex-direction: column;
	    pointer-events: none;
	}
	
	.place-order-footer>.flex {
	    position: relative;
	    flex: 1;
	    pointer-events: none;
	}
	
	.place-order-footer .coupon-tips {
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    background: #ffc700;
	    pointer-events: auto;
	}
	
	.place-order-footer .coupon-tips .inner,.place-order-footer>.content {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	}
	
	.place-order-footer .coupon-tips .inner {
	    padding: 20rpx 32rpx;
	    background: #fff9f6;
	    border-top-left-radius: 30rpx;
	}
	
	.place-order-footer .coupon-tips .inner .icon {
	    display: block;
	    width: 60rpx;
	    height: 60rpx;
	    margin-right: 20rpx;
	}
	
	.place-order-footer .coupon-tips .inner .icon.type-0 {
	    background: url(https://cdn.atzuche.com/mini/icon-car-service-coupon-empty.png);
	    background-size: 100% 100%;
	}
	
	.place-order-footer .coupon-tips .inner .icon.type-1,.place-order-footer .coupon-tips .inner .icon.type-2 {
	    background: url(https://cdn.atzuche.com/mini/icon-car-service-coupon-part.png);
	    background-size: 100% 100%;
	}
	
	.place-order-footer .coupon-tips .inner .icon.type-3 {
	    background: url(https://cdn.atzuche.com/mini/icon-car-service-coupon-fill.png);
	    background-size: 100% 100%;
	}
	
	.place-order-footer .coupon-tips .inner .r {
	    flex: 1;
	}
	
	.place-order-footer .coupon-tips .inner .info {
	    font-size: 22rpx;
	}
	
	.place-order-footer .coupon-tips .inner .yellow {
	    color: #ffa800;
	}
	
	.place-order-footer .coupon-tips .inner .yellow.arrow {
	    margin-left: 20rpx;
	    padding-right: 24rpx;
	    background: url(https://cdn.atzuche.com/mini/icon-arrow-right-orange.png) right center no-repeat;
	    background-size: 30rpx auto;
	}
	
	.place-order-footer .coupon-tips .inner .desc {
	    display: block;
	    font-size: 22rpx;
	    opacity: .4;
	}
	
	.place-order-footer>.content {
	    position: relative;
	    z-index: 9999;
	    padding: 20rpx 30rpx;
	    background: #fff;
	    pointer-events: auto;
	}
	
	.place-order-footer>.content.shadow {
	    box-shadow: 0 -8rpx 20rpx rgba(45,156,219,.05),0 -1px 0 rgba(0,0,0,.02);
	}
	
	.place-order-footer>.content .info {
	    display: -ms-flexbox;
	    display: flex;
	    flex: 1;
	    flex-direction: column;
	    -ms-flex-align: start;
	    align-items: flex-start;
	}
	
	.place-order-footer>.content .b,.place-order-footer>.content .price {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	}
	
	.place-order-footer>.content .price .amount,.place-order-footer>.content .price .title {
	    display: block;
	    font-weight: 700;
	    font-size: 30rpx;
	}
	
	.place-order-footer>.content .price .amount {
	    margin-left: 8rpx;
	    color: $price-color;
	}
	
	.place-order-footer>.content .price .period-num {
	    display: block;
	    margin-left: 8rpx;
	    padding: 8rpx;
	    color: #407bff;
	    font-size: 18rpx;
	    line-height: 1;
	    background: rgba(64,123,255,.05);
	    border-radius: 8rpx;
	}
	
	.place-order-footer>.content .price .tag {
	    display: block;
	    margin-left: 8rpx;
	    padding: 8rpx;
	    color: #fff;
	    font-size: 18rpx;
	    line-height: 1;
	    background: -webkit-gradient(linear,right top,left top,color-stop(2%,$price-color),to(#ff6c87));
	    background: -webkit-linear-gradient(right,$price-color 2%,#ff6c87 100%);
	    background: -o-linear-gradient(right,$price-color 2%,#ff6c87 100%);
	    background: linear-gradient(270deg,$price-color 2%,#ff6c87 100%);
	    border-radius: 4rpx;
	}
	
	.place-order-footer>.content .b {
	    // margin-top: -15rpx;
	}
	
	.place-order-footer>.content .b .total {
	    display: block;
	    margin-right: 10rpx;
	    font-size: 26rpx;
	    opacity: .6;
	}
	
	.place-order-footer>.content .b .detail {
	    position: relative;
	    z-index: 2;
	    display: block;
	    padding: 20rpx 26rpx 20rpx 0;
	    color: rgba(60,60,90,.6);
	    font-size: 22rpx;
	    background: url(../static/images/icon-arrow-right-black.png) right center no-repeat;
	    background-size: 30rpx auto;
	}
	
	.place-order-footer>.content .submit {
	    width: 240rpx;
	}
	
	.place-order-footer .safe-area {
	    display: block;
	    height: constant(safe-area-inset-bottom);
	    height: env(safe-area-inset-bottom);
	    background: #fff;
	}
</style>
